<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>尚品汇</title>
  <!-- 引入页签图标 -->
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <!-- 引入重置样式 -->
  <link rel="stylesheet" href="css/reset.css">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- 顶部导航条 -->
  <div class="topbar">
    <!-- 版心 -->
    <div class="container clearfix">
      <!-- 左侧欢迎区 -->
      <div class="welcome leftfix">
        <span class="hello">尚品汇欢迎您</span><!-- 行内元素换行会导致间隙 -->
        <span>请</span>
        <a href="#" class="login">登录</a>
        <a href="#" class="register">免费注册</a>
      </div>
      <!-- 右侧导航区 -->
      <div class="topbar-nav rightfix">
        <ul class="list clearfix">
          <li><a href="#">我的订单</a></li>
          <li><a href="#">我的购物车</a></li>
          <li><a href="#">我的尚品汇</a></li>
          <li><a href="#">尚品汇会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li><a href="#">关注尚品汇</a></li>
          <li><a href="#">合作招商</a></li>
          <li><a href="#">商家后台</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 头部 -->
  <div class="header">
    <div class="container clearfix">
      <!-- 左侧logo -->
      <div class="logo leftfix">
        <img src="images/logo.png" alt="尚品汇">
      </div>
      <!-- 右侧搜索 -->
      <div class="search rightfix">
        <form action="#">
          <input type="text">
          <button></button>
        </form>
      </div>
    </div>
  </div>
  <!-- 主导航 -->
  <div class="main-nav">
    <div class="container clearfix">
      <div class="all-types leftfix">全部商品分类</div>
      <ul class="main-nav-list leftfix clearfix">
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">尚品汇超市</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">有趣</a></li>
        <li><a href="#">秒杀</a></li>
      </ul>
    </div>
  </div>
  <!-- 主要内容区 -->
  <div class="main-content">
    <div class="container clearfix">
      <ul class="slide leftfix">
        <li>
          <!-- 一级菜单 -->
          <a href="#">手机、数码、通信</a>
          <!-- 二级菜单 -->
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络远程</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">多媒体图书</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">音像</a></dt>
              <dd><a href="#">音乐</a></dd>
              <dd><a href="#">影视</a></dd>
              <dd><a href="#">教育音像</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">英文原版</a></dt>
              <dd><a href="#">少儿</a></dd>
              <dd><a href="#">商务投资</a></dd>
              <dd><a href="#">英语学习考试</a></dd>
              <dd><a href="#">文学</a></dd>
              <dd><a href="#">传记</a></dd>
              <dd><a href="#">励志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">文艺</a></dt>
              <dd><a href="#">小说</a></dd>
              <dd><a href="#">文学</a></dd>
              <dd><a href="#">青春文学</a></dd>
              <dd><a href="#">传记</a></dd>
              <dd><a href="#">艺术</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">少儿</a></dt>
              <dd><a href="#">胎教</a></dd>
              <dd><a href="#">0-2岁</a></dd>
              <dd><a href="#">3-6岁</a></dd>
              <dd><a href="#">7-10岁</a></dd>
              <dd><a href="#">11-14岁</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">人文社科</a></dt>
              <dd><a href="#">历史</a></dd>
              <dd><a href="#">哲学</a></dd>
              <dd><a href="#">国学</a></dd>
              <dd><a href="#">政治/军事</a></dd>
              <dd><a href="#">法律</a></dd>
              <dd><a href="#">人文社科</a></dd>
              <dd><a href="#">心理学</a></dd>
              <dd><a href="#">文化</a></dd>
              <dd><a href="#">社会科学</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">经管励志</a></dt>
              <dd><a href="#">经济</a></dd>
              <dd><a href="#">金融与投资</a></dd>
              <dd><a href="#">管理</a></dd>
              <dd><a href="#">励志与成功</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">生活</a></dt>
              <dd><a href="#">健康与保健</a></dd>
              <dd><a href="#">家庭与育儿</a></dd>
              <dd><a href="#">旅游</a></dd>
              <dd><a href="#">烹饪美食</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">科技</a></dt>
              <dd><a href="#">工业技术</a></dd>
              <dd><a href="#">科普读物</a></dd>
              <dd><a href="#">建筑</a></dd>
              <dd><a href="#">医学</a></dd>
              <dd><a href="#">科学与自然</a></dd>
              <dd><a href="#">计算机与互联网</a></dd>
              <dd><a href="#">电子通信</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">教育</a></dt>
              <dd><a href="#">中小学教辅</a></dd>
              <dd><a href="#">教育与考试</a></dd>
              <dd><a href="#">外语学习</a></dd>
              <dd><a href="#">大中专教材</a></dd>
              <dd><a href="#">科学与自然</a></dd>
              <dd><a href="#">字典词典</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">艺术与收藏</a></dt>
              <dd><a href="#">经济管理</a></dd>
              <dd><a href="#">文化与艺术</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">其他</a></dt>
              <dd><a href="#">工具书</a></dd>
              <dd><a href="#">杂志期刊</a></dd>
              <dd><a href="#">套装书</a></dd>
              <dd><a href="#">打折图书</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">家用电器</a></li>
        <li><a href="#">电脑、办公</a></li>
        <li><a href="#">家居、家具、家装</a></li>
        <li><a href="#">男装、女装、童装</a></li>
        <li><a href="#">个户化妆、清洁用品</a></li>
        <li><a href="#">鞋靴、箱包、珠宝</a></li>
        <li><a href="#">运动户外、钟表</a></li>
        <li><a href="#">汽车、汽车用品</a></li>
        <li><a href="#">母婴、玩具乐器</a></li>
        <li><a href="#">食品、酒类、生鲜</a></li>
        <li><a href="#">医药保健</a></li>
        <li><a href="#">图书、音像、电子书</a></li>
        <li><a href="#">彩票、旅行、充值</a></li>
        <li><a href="#">理财、众筹、白条</a></li>
        <li><a href="#">理财、众筹、白条</a></li>
      </ul>
      <div class="banner leftfix">
        <img src="./images/banner主图.png" alt="" />
      </div>
      <div class="slide-other leftfix">
        <div class="message">
          <div class="title clearfix">
            <span class="leftfix">尚品快报</span>
            <a href="#" class="rightfix">更多&nbsp;&gt;</a>
          </div>
          <ul class="msg-list">
            <li><a href="#">[特惠] 毛衣+直筒裤，才是YYDS。</a></li>
            <li><a href="#">[特惠] 超大容量的满足感来啥子于</a></li>
            <li><a href="#">[特惠] 每日一件，衣柜满到塞不下。</a></li>
            <li><a href="#">[特惠] 媳妇儿再买，我就疯给他看。</a></li>
          </ul>
        </div>
        <div class="other-nav">
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 秒杀 -->
  <div class="seckill">
    <div class="container clearfix">
      <img src="images/seckill.png" alt="秒杀">
      <img src="images/banner1.png" alt="秒杀1">
      <img src="images/banner2.png" alt="秒杀2">
      <img src="images/banner3.png" alt="秒杀3">
      <img src="images/baner4.png" alt="秒杀4">
    </div>
  </div>
  <!-- 楼层 -->
  <div class="floor">
    <div class="container">
      <!-- 上部分 -->
      <div class="floor-nav clearfix">
        <span class="floor-name leftfix">家用电器</span>
        <ul class="floor-nav-list rightfix">
          <li><a href="#">热门</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">生活电器</a></li>
          <li><a href="#">厨房电器</a></li>
          <li><a href="#">应季电器</a></li>
          <li><a href="#">空气/净水</a></li>
          <li><a href="#">高端电器</a></li>
        </ul>
      </div>
      <!-- 下部分 -->
      <div class="floor-info clearfix">
        <div class="item item1">
          <ul class="item1-list clearfix">
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">4K电视</a></li>
            <li><a href="#">空气净化器</a></li>
            <li><a href="#">IH电饭煲</a></li>
            <li><a href="#">滚筒洗衣机</a></li>
            <li><a href="#">电热水器</a></li>
          </ul>
          <img src="./images/编组.png" alt="广告">
        </div>
        <div class="item item2">
          <img src="./images/appliance_banner07.png" alt="广告">
        </div>
        <div class="item item3">
          <img src="./images/微波炉.png" alt="广告">
          <img src="./images/空气炸锅.png" alt="广告">
        </div>
        <div class="item item4">
          <img src="./images/冰箱.png" alt="冰箱">
        </div>
        <div class="item item5">
          <img src="./images/电饭煲.png" alt="广告">
          <img src="./images/电饭煲2.png" alt="广告">
        </div>
      </div>

    </div>
  </div>
  <!-- 页脚 -->
<div class="footer">
  <div class="container">
       <!-- 顶部链接 -->
       <div class="top-links clearfix">
           <ul class="links-list">
               <li><a href="#">购物指南</a></li>
               <li><a href="#">购物流程</a></li>
               <li><a href="#">会员介绍</a></li>
               <li><a href="#">生活旅行</a></li>
               <li><a href="#">常见问题</a></li>
               <li><a href="#">大家电</a></li>
               <li><a href="#">联系客服</a></li>
           </ul>
           <ul class="links-list">
               <li><a href="#">配送方式</a></li>
               <li><a href="#">上门自提</a></li>
               <li><a href="#">211限时达</a></li>
               <li><a href="#">配送服务查询</a></li>
               <li><a href="#">配送费收取标准</a></li>
           </ul>
           <ul class="links-list">
               <li><a href="#">支付方式</a></li>
               <li><a href="#">货到付款</a></li>
               <li><a href="#">在线支付</a></li>
               <li><a href="#">生活旅行</a></li>
               <li><a href="#">分期付款</a></li>
               <li><a href="#">公司转账</a></li>
           </ul>
           <ul class="links-list">
               <li><a href="#">售后服务</a></li>
               <li><a href="#">售后政策</a></li>
               <li><a href="#">价格保护</a></li>
               <li><a href="#">退款说明</a></li>
               <li><a href="#">返修/退换货</a></li>
               <li><a href="#">取消订单</a></li>
           </ul>
           <ul class="links-list">
               <li><a href="#">特色服务</a></li>
               <li><a href="#">夺宝岛</a></li>
               <li><a href="#">DIY装机</a></li>
               <li><a href="#">延保服务</a></li>
               <li><a href="#">尚品汇E卡</a></li>
               <li><a href="#">尚品汇通信</a></li>
               <li><a href="#">尚品鱼座智能</a></li>
           </ul>
           <ul class="links-list">
               <li><a href="#">自营覆盖区县</a></li>
               <li><a href="#">尚品汇已向全国2661个区县</a></li>
               <li><a href="#">提供自 营配送服务，支持货到</a></li>
               <li><a href="#">付款、POS 机刷卡和售后上门</a></li>
               <li><a href="#">常见问题</a></li>
               <li><a href="#">服务</a></li>
               <li><a href="#">查看详情</a></li>
           </ul>
       </div>
       <!-- 分隔线 -->
       <div class="line"></div>
       <!-- 底部链接 -->
       <div class="bottom-links">
           <ul class="bottom-links-list clearfix">
               <li><a href="#">关于我们</a></li>
               <li><a href="#">联系我们</a></li>
               <li><a href="#">联系客服</a></li>
               <li><a href="#">合作招商</a></li>
               <li><a href="#">商家帮助</a></li>
               <li><a href="#">营销中心</a></li>
               <li><a href="#">手机尚品</a></li>
               <li><a href="#">友情链接</a></li>
               <li><a href="#">销售联盟</a></li>
               <li><a href="#">隐私政策</a></li>
           </ul>
           <div class="copyright">京ICP备12345678901</div>
       </div>
   </div>
</div>
</body>

</html>